<template>
  <div class="create-order">
    <h2 class="mb-6">{{ $t('feedback') }}</h2>
    <v-form ref="form" v-model="form.valid">
      <div class="view">
        <v-row>
          <v-text-field
            v-model="form.mobile"
            dense
            :rules="mobileRules"
            :counter="14"
            :label="$t('mobile')"
            type="phone"
            outlined
            persistent-hint
          />
        </v-row>

        <v-row>
          <v-text-field
            v-model="form.user_name"
            dense
            :label="$t('username')"
            outlined
            persistent-hint
          />
        </v-row>

        <v-row>
          <v-text-field v-model="form.email" dense :label="$t('email')" outlined persistent-hint />
        </v-row>
        <v-row>
          <v-textarea
            v-model="form.memo"
            dense
            :label="$t('message')"
            type="textarea"
            outlined
            persistent-hint
            name="input-7-4"
          />
        </v-row>

        <v-row no-gutters align="center" justify="center">
          <v-btn
            class="mt-5"
            elevation="2"
            rounded
            dark
            color="#E22129FF"
            style="text-transform: none"
            @click="submit"
          >
            {{ $t('submit') }}
          </v-btn>
        </v-row>
      </div>
    </v-form>

    <v-overlay :value="overlay">
      <v-alert
        class="mx-4"
        style="background-color: #ffffff !important"
        dense
        outlined
        prominent
        type="success"
      >
        {{ $t('thanksboard') }}
      </v-alert>
    </v-overlay>
    <v-snackbar v-model="tipShow" timeout="3000" centered>
      {{ tipTxt }}
    </v-snackbar>
  </div>
</template>

<script>
export default {
  name: 'FeedBack',
  layout: 'simple',
  data: () => ({
    form: {
      user_name: '',
      mobile: '',
      memo: '',
      email: ''
    },
    overlay: false,
    tipShow: false,
    tipTxt: '',
    mobileRules: [(v) => !!v || 'mobile is required']
  }),
  methods: {
    submit() {
      const res = this.$refs.form.validate();
      if (res) {
        this.overlay = true;
        this.$api
          .post('/home/addFeeback', this.form, { getAll: true })
          .then((res) => {
            if (res.code === 1) {
              this.tipTxt = this.$t('submitsuccess');
              this.tipShow = true;
              this.$refs.form.reset();
              setTimeout(() => {
                this.overlay = false;
              }, 3000);
            }
          })
          .catch(() => {
            this.overlay = false;
          });
      }
    }
  }
};
</script>

<style scoped>
.create-order {
  padding: 40px;
}

.loading {
  display: flex;
  align-items: center;
}
</style>
